<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../utils/flexible.js"></script>
</head>
<style>
*{margin:0;
    padding:0;
   box-sizing: border-box;
   list-style: none;
   
   }
   ::-webkit-scrollbar {
        display:none};
   a{display:block;}*
     #header{
       background:#1d6dff;
       height: 1.3333rem;
       /* padding: .1333rem; */
       text-align: center;
       overflow: hidden;
   }

   #header .left {
       margin-top: .1333rem;
       text-align: center;
       font-size: .5333rem;
       color: #fff;
       float: left;
       text-decoration: none;
   }
   #header h4{
       display: inline-block;
       text-align: center;
       font-size: .5333rem;

       font-weight: bolder;
       color: #fff;
       margin-top: .2667rem;
       margin-bottom: .2667rem;
   }
    #header .right {
        float: right;
        padding: 0.1867rem;
   }
   #header .right a{
       color: #666;
       text-decoration: none;
   }
   #header .right a img{
       height: .9067rem;
       vertical-align: center;
   }
   .cityNav {
    border-bottom: 0.0267rem solid #cccccc;
    top: -0.2667rem;
    margin-top: .08rem;
    height: .9067rem;
    background-color: #fff;
    box-shadow: -0.1333rem 0 .2667rem #ccc;
}
.cityNav  .box{
    height: .9067rem;
    width: 2.6667rem;
    float: left;
    font-size: .3733rem;
    margin-right: .5333rem;
    text-align: center;
    line-height: .9067rem;
    cursor: pointer;
}

</style>
<body>
    <header id="header">
        <a href="#" class="left">
            〈
        </a>
        <h4>
            凑单品
        </h4>
         <div class="right">
            <a href="#"><img src="../images/header_app.png" alt="" width="34"></a>    
         </div>
    </header>
    <div class="cityNav">
        <div class="box"><span class="market">
            天猫超市
        </span>
        <span>▲</span>
        <div class="content">

        </div>
        
        </div>  
        <div class="box"><span>
            华北
        </span>
        <span>▲</span>
        </div>  
        <div class="box"><span>
            免费区
        </span>
        <span>▲</span>
        </div>  
    </div>
</body>
</html>
<script src="../utils/utils.js"></script>
<script>
    let ct=document.querySelector('.content')
    let el="";
    fetch('http://chst.vip:1234/api/getgsshop')
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
        res.result.forEach(item =>{
            el+=`
            <p class="from">
                ${item.shopName}
            </p>  `
        })
        ct.innerHTML=el;
    })
   let box=document.querySelector('.box')
    box.onclick = function(e){
        console.log(e.target)
        if(e.target.tagName==="market"){
           
        }
    }

</script>